<template>
	<view class="item" @click="clickFun">
		<!--  mode="widthFix" -->
		<image class="cover" :src="item.cover_img" lazy-load></image>

		<view class="box">
			<view class="title"> <text class="text_tag"
					:style="{'background' : pickColor(index) , 'color' : index != 0 && index != 1 && index != 2? 'rgb(118,118,118)' : '#fff' }">{{index + 1}}</text>

				<text>{{ item.name }}</text>
			</view>

			<view class="desc">{{ item.synopsis }}</view>

			<view class="tags">
				<view class="tag" v-for="tag in item.novel_type_name?.split(',')" :key="tag">{{ tag }}</view>
				<view class="hot_tag" v-if="item.frequency">
					<image src="../../static/bookBar/hot.svg" mode=""></image>
					{{(item.frequency / 10000).toFixed(1)}}W人看过
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { BookItem } from '@/types/index'

	interface ItemProps {
		item : BookItem
		index : number
	}

	defineProps<ItemProps>()

	const emit = defineEmits(['click'])

	const clickFun = (e : any) => {
		emit('click', e)
	}

	const pickColor = (index) => {
		switch (index + 1) {
			case 1:
				return 'red';
				break;
			case 2:
				return 'rgb(255,105,64)';
				break;
			case 3:
				return 'rgb(252,159,50)';
				break;
			default:
				return 'rgb(238,238,238)';
		}
	}
</script>

<style scoped lang="scss">
	.item {
		padding: 30rpx;
		background: #FEFEFE;
		border-radius: 20rpx;
		@include flex($align: center);
		flex-wrap: nowrap;

		.cover {
			@include size(192rpx, 240rpx);
			border-radius: 8rpx;
			overflow: hidden;
		}

		.box {
			margin-left: 24rpx;
			flex: 1;
			overflow: hidden;
			height: 120px !important;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {
				@include tx(32rpx);
				color: #373737;
				font-weight: 600;
				// @include omit(1);
				display: flex;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				line-height: 1rem;
				height: 1rem;
				width: 100%;

				text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 87%;

					/*  #ifdef  MP-WEIXIN  */

					font-size: 1rem;
					/* #endif  */
					/*  #ifndef  MP-WEIXIN  */
					font-size: 0.8rem;
					/* #endif  */

				}

				.text_tag {
					display: inline-block;
					/* #ifndef MP-KUAISHOU */
					width: 1rem;
					height: 1rem;
					/* #endif */
					/* #ifdef MP-KUAISHOU */
					width: 1rem;
					height: 1rem;
					/* #endif */
					background: red;
					color: #fff;
					margin-right: 0.2rem;
					overflow: hidden;
					font-size: 0.6rem;
					border-radius: 0.2rem;
					text-align: center;
					flex: none;
				}
			}

			.desc {
				margin: 20rpx 0;
				@include tx(28rpx, 40rpx);
				// -webkit-line-clamp: 2 !important;
				color: #898989;
				height: 40px;
				@include omit(3);
				/*  #ifdef  MP-WEIXIN  */

				font-size: 0.8rem;
				/* #endif  */
				/*  #ifndef  MP-WEIXIN  */
				font-size: 0.8rem;
				/* #endif  */
			}

			.tags {
				@include flex($align: center);

				.tag {
					padding: 8rpx 12rpx;
					@include tx(24rpx);
					color: #E46125;
					background: #FCF0E9;
					border-radius: 8rpx;
					margin-right: 0.2rem;

					&+.tag {
						margin-left: 12rpx;
					}
				}

				.hot_tag {
					image {
						@include size(24rpx);
						margin-right: 0.1rem;
					}

					color: rgb(148, 148, 148);
					@include tx(24rpx);
				}
			}
		}
	}
</style>